{extend name="common/base" /}
{block name="body"} 
<main>
    <!-- banner大图 -->
    <div class="hr_img2" id="career">
        <!-- <img src="__ROOT__/static/images/line.png"> -->
    </div>
    <div class="banners">
        <div class="swiper banner-swiper">
            {volist name="banner_list" id="vo"} 
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="{$vo.url|default='#'}">
                        <img src="{$vo.thumb}" title="{$vo.title}" />
                    </a>
                </div>
            {/volist}

            <div class="swiper-pagination"></div>
            <div class="banner-prev layui-icon layui-icon-left hidden-xs"></div>
            <div class="banner-next layui-icon layui-icon-right hidden-xs"></div>
        </div>
    </div>

    <!-- 第二板块 -->
    <!-- <div class="info">
        <div class="container">

        </div>
    </div> -->
    <!-- 第一板块 -->
    <div class="first-plate ">
        <div class="container">
            <div class="first-plate-box">
                <div class="first-plate-pagination first-plate-nav wow animate__fadeInUp"></div>
                <div class="first-tab-content  wow animate__slideInUp ">
                    <div class="swiper-wrapper">
                        {volist name="marks_goods" id="vo"} 
                        <ul class="first-plate-top swiper-slide">
                            {volist name="vo.goods" id="goods"} 
                            <li>
                                <a href="/goods/{$goods.code}">
                                    <img src="{$goods.cover_slide}" style="height: 350px;" title="{$goods.name}" />
                                </a>
                            </li>
                            {/volist}
                        </ul>
                        {/volist}
                      
                    </div>
                </div>
                <div class="shop-swiper  wow animate__slideInUp ">
                    <div class="swiper-wrapper">
                        {volist name="goods_list" id="goods"} 
                        <div class="swiper-slide">
                            <li class="collect-goods-item">
                                <div>
                                    <a href="/goods/{$goods.code}">
                                        <img src="{$goods.cover}" alt="">
                                        <p><span>{$goods.name}</span>
                                            <img src="__ROOT__/static/images/part2-go.png" alt="" />
                                        </p>
                                    </a>
                                    <div class="collect-oparation">
                                        <p class="cancel-collect collect" data-code="{$goods.code}" style="cursor: pointer;" >
                                            {if $goods.is_collect} 
                                                <img src="__ROOT__/static/images/cancel-heart.png" alt="">
                                                <span>cancel</span>
                                                {else /} 
                                                <img src="__ROOT__/static/images/heart.png" alt="">
                                                <span>collect</span>
                                            {/if}
                                            
                                        </p>
                                        <p class="collect-to-cart" style="cursor: pointer;">
                                            <img src="__ROOT__/static/images/collect-shopping-cart.png" alt="">
                                            <span>add to cart</span>
                                        </p>
                                    </div>
                                    <div class="collect-purchase">
                                        <a href="/goods/{$goods.code}">
                                            Purchase
                                        </a>
                                    </div>
                                </div>
                            </li>
                        </div>
                        {/volist}
                    </div>
                </div>
                <ul class="layui-row part2-goods layui-col-space32 ">
                    {volist name="cat_list" id="cat"} 
                        <li class="layui-col-md3 layui-col-xs6 wow animate__flipInY " animate-duration="1"
                            animate-duration-num="0.3">
                            <a href="/index_goods/{$cat.id}">
                                <img src="{$cat.cover}" alt="" />
                                <div class="part2-goods-cover">
                                    <div class="part2-goods-cover-left">
                                        <h1>{$cat.name}</h1>
                                        <span>shop now</span>
                                    </div>
                                    <div class="par2-img">
                                        <img src="__ROOT__/static/images/part2-go.png" alt="" />
                                    </div>
                                </div>
                            </a>
                        </li>
                    {/volist}
                
                </ul>

                <ul class="first-plate-goods layui-row layui-col-space32">
                    {volist name="designer_list" id="designer"} 
                        <li class="layui-col-md6 layui-col-xs12 layui-row layui-col-space25 wow animate__fadeInUp"
                            animate-duration="1" animate-duration-num="0.5">
                            <div class="img layui-col-md6 img layui-col-xs6">
                                <img src="{$designer.cover}" alt="" />
                            </div>
                            <div class="text layui-col-md6 layui-col-xs6">
                                <h1>{$designer.name}</h1>
                                <p>{$designer.info}</p>
                                <ul class="first-plate-goods-small layui-row">
                                    {if count($designer.goods) > 0}
                                        {volist name="designer.goods" id="goods"} 
                                            <li class="layui-col-md5 layui-col-xs5">
                                                <a href="/goods/{$goods.code}">
                                                    <img src="{$goods.cover}" />
                                                    <p>{$goods.name}</p>
                                                </a>
                                            </li>
                                        {/volist}
                                    {/if}
                                </ul>
                            </div>
                        </li>
                    {/volist}

                </ul>
            </div>
        </div>
    </div>


    <!-- 第三板块 -->
    <div class="three-plate">
        <div class="container layui-row layui-col-space32">
            <div class="three-plate-text layui-col-md7 layui-col-xs12 wow animate__fadeInUp">
                <h1 class="three-plate-title">About Us</h1>
                {$about_us.content|raw}
              
            </div>
            <div class="three-plate-img layui-col-md5 layui-col-xs12 layui-row layui-col-space20 wow animate__flipInY"
                animate-duration="1" animate-duration-num="0.5">
                <img class="layui-col-md5 layui-col-xs5" src="__ROOT__/static/images/part3-img1.png" alt="" />
                <img class="layui-col-md7 layui-col-xs7" src="__ROOT__/static/images/part3-img2.png" alt="" />
            </div>
        </div>
    </div>
    
</main>
{/block}
{block name="js"} 
    <script>
      $(document).on('click', '.collect', function() {
            var is_login = "{$is_login}";
            var that = this;
            if (!is_login) {
                layer.msg('Please login first', {icon: 2, time: 2000}, function() {
                    window.location.href = '/login'; // Replace with target URL
                });
                return;
            }
            
            var id = $(this).data('id');
            var code = $(this).data('code');
            var data = { gcode: code };
            
            // Make the AJAX request
            ajaxRequest('/collect', data, 'POST', this, function (response) {
                console.log(response);
                // Assuming the response will indicate if the item was successfully collected
                if (response.code == 1) {
                    // Toggle image and text
                    var img = $(that).find('img');
                    var span = $(that).find('span');
                   
                    // Check if currently collected (e.g., based on image or state)
                    if (span.text() === 'collect') {
                        // Change to "cancel" state
                        img.attr('src', '__ROOT__/static/images/cancel-heart.png');
                        span.text('cancel');
                    } else {
                        // Change to "collect" state
                        img.attr('src', '__ROOT__/static/images/heart.png');
                        span.text('collect');
                    }
                    
                    // Optional success message
                    layer.msg('SUCCESS', {icon: 1, time: 2000});
                }
            });
        });

    </script>
{/block}